<template>
  <div class="user-county">
    <SelectTitle select-title="请选择您所在区县" />
    <div class="list-content">
      <div>
        <ul>
          <li v-for="(county, index) in countyList" :key="index" :class="{ active: selectData && selectData.value === county.value }">>
            <div @click="selectCounty(county)">
              <p v-text="county.name" />
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  import SelectTitle from './SelectTitle';
  import { getUserCounty } from '../../../api/index';
  
  export default {
    name: 'UserCounty',
    components: {
      SelectTitle,
    },
    props: {},
    data() {
      return {
        countyList: [],
        selectData: null,
      };
    },
    watch: {
      selectData: {
        handler(value) {
          this.$emit('select-change', { data: value });
        },
      },
    },
    mounted() {
    },
    created() {
      this.init();
    },
    methods: {
      init() {
        this.getData();
      },
      async getData() {
        const res = await getUserCounty({});
        if (res.code === 200 && res.data) {
          this.countyList = res.data.map((val) => {
            return { ...val, value: val.organId, name: val.organName };
          });
        }
      },
      selectCounty(county) {
        this.selectData = county;
      },
    },
  };
</script>

<style lang="scss" scoped>
  .user-county {
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    .list-content {
      flex: 1;
      overflow: hidden;
      padding: 15px 0;
      > div {
        height: 100%;
        overflow: auto;
        padding: 0 15px;
        ul {
          margin: 0 -5px;
          font-size: 0;
          li {
            display: inline-block;
            padding: 5px;
            width: calc((1 / 3) * 100%);
            > div {
              border-radius: 5px;
              background-color: white;
              padding: 15px 0;
              text-align: center;
              p {
                font-size: 14px;
                line-height: 1;
              }
            }
            &.active {
              > div {
                background-color: #0669f0;
                p {
                  color: white;
                }
              }
            }
          }
        }
      }
    }
  }
</style>
